<template>
    <div style="padding: 40px;">
        <div style="display: flex;">
            <div style="line-height: 40px;">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="状态：">
                        <el-select v-model="form.region" placeholder="请选择 状态" clearable>
                            <el-option label="禁用" :value="0"></el-option>
                            <el-option label="正常" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div style="line-height: 38px; margin-left: 40px;" @click="handleSearch">
                <el-button type="primary">
                    <i class="el-icon-search"></i>
                    <span>搜 索</span>
                </el-button>
                <el-button @click="clearChecked" type="el-button">
                    <i class="el-icon-delete"></i>
                    <span>清 空</span>
                </el-button>
            </div>
        </div>
        <div>
            <el-button type="primary" @click="handleAddNew">
                <i class="el-icon-plus"></i>
                <span>新增</span>
            </el-button>
            <el-button type="danger" :disabled="prohibit" @click="deleteAll">
                <span>批量删除</span>
            </el-button>
        </div>
        <div class="el-tag">
            <span class="avue-crud__tip-name">
                当前表格已选择
                <span class="avue-crud__tip-count">{{ lengths }}</span>
                项
            </span>
            <button @click="clearChecked" type="button"
                class="el-button el-button--text el-button--small"><span>清空</span></button>
        </div>
        <div>
            <el-table :data="tableData" stripe style="width: 100%" border v-loading="loading"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="imgUrl" label="轮播图片" min-width="300" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.imgUrl" style="width: 100px; height: 100px;">
                    </template>
                </el-table-column>
                <el-table-column prop="seq" label="顺序" min-width="400" align="center">
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="300">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 1">正常</span>
                        <span v-if="scope.row.status === 0">禁用</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" align="center" width="300">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="handleEdit(scope.row)">
                            <i class="el-icon-edit"></i>修改</el-button>
                        <el-button type="danger" @click="handleDelete(scope.row)">
                            <i class="el-icon-delete"></i>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 页码 -->
        <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
                :page-sizes="[10, 20, 30, 40]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="轮播图片" prop="imgUrl">
                    <el-upload class="avatar-uploader" action="http://47.104.167.34:9305/apis/admin/file/upload/element"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                        :headers="uploadHeaders">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="顺序" prop="seq">
                    <el-input v-model="ruleForm.seq"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio v-model="ruleForm.status" :label="0">禁用</el-radio>
                    <el-radio v-model="ruleForm.status" :label="1">正常</el-radio>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-radio v-model="ruleForm.type" :label="-1">无</el-radio>
                    <el-radio v-model="ruleForm.type" :label="0">商品</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="Selects" @click="SelectProduct">选择商品</el-button>
                </el-form-item>
                <el-form-item prop="product" v-if="product">
                    <div class="el-card is-always-shadow" style="height: 160px; width: 120px;">
                        <div class="el-card__body" style="padding: 0px;">
                            <img :src="imgs" style="height: 104px; width: 100%;">
                            <div class="card-prod-bottom"><span class="card-prod-name">{{ texts }}</span>
                                <div @click="delProduct" class="sahnchu">删除</div>
                            </div>
                        </div>
                    </div>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="!handleAdds" type="primary" @click="handleSure">确 定</el-button>
                <el-button v-if="handleAdds" type="primary" @click="handleAdd">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 选择商品弹窗 -->
        <el-dialog :title="title" :visible.sync="dialogVisibles" width="50%">
            <el-table :data="tableDataS" border style="width: 100%">
                <el-table-column prop="prodId" width="34" align="center">
                    <template slot-scope="scope">
                        <el-radio v-model="radio" :label="scope.row.prodId"
                            @change="handleRadioChange(scope.row)"></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="prodName" label="产品名称" width="600" align="center">
                </el-table-column>
                <el-table-column prop="imgs" label="产品图片" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.imgs">
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination @size-change="handleSizeChanges" @current-change="handleCurrentChanges"
                    :current-page="currents" :page-sizes="[10, 20, 30, 40]" :page-size="sizes"
                    layout="total, sizes, prev, pager, next, jumper" :total="totals">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibles = false">取 消</el-button>
                <el-button type="primary" @click="handleSureOne">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getList, getInfo, deleteder, prodPage, DelindexImg, DeliAdd } from '@/api/swiper'
import dayjs from 'dayjs';
// import { status } from 'nprogress';
export default {
    data() {
        return {
            uploadHeaders: {
                "authorization": localStorage.getItem("token")
            },
            title: '',
            lengths: 0,
            product: false,
            prohibit: true,
            handleAdds: false,
            radio: '',
            prodIds: '',
            ruleForm: {
                imgUrl: '',
                seq: '',
                status: '',
                type: ''
            },
            imgs: '',
            texts: '',
            imgtt: '',
            textt: '',
            imageUrl: '',
            // UploadImage: '',
            form: {
                region: ''
            },
            dialogVisible: false,
            dialogVisibles: false,
            tableData: [],
            timestamp: '',
            Selects: '',
            current: 1,
            size: 10,
            total: 1,
            currents: 1,
            sizes: 10,
            totals: 1,
            loading: false,
            multipleSelection: [],
            tableDataS: {
                prodName: '',
                imgs: '',
                prodId: ''
            },
            rules: {
                imgUrl: [
                    { required: true, message: '轮播图片不能为空', trigger: ['blur', 'submit'] },
                ],
            }
        }
    },
    methods: {
        // 数据渲染
        getList() {
            this.loading = true;
            getList({
                t: this.timestamp,
                current: this.current,
                size: this.size
            }).then(response => {
                console.log(response)
                this.tableData = response.data.records
                this.size = response.data.size
                this.total = response.data.total
                this.current = response.data.current
                this.loading = false;
            })
        },
        // 副页列表
        handleprodPage() {
            prodPage({
                t: this.timestamp,
                current: this.currents,
                size: this.sizes
            }).then(response => {
                this.tableDataS = response.data.records
                this.sizes = response.data.size
                this.totals = response.data.total
                this.currents = response.data.current
                // console.log(response.data.records)
            })
        },
        // 清空搜索
        clearChecked() {
            this.form.region = ''
        },
        // 新增
        handleAddNew() {
            this.ruleForm.imgUrl = ''
            this.imageUrl = ''
            this.texts = '',
                this.idd = '',
                this.product = false
            this.handleAdds = true
            this.dialogVisible = true
        },
        // 新增保存
        handleAdd() {
            // console.log('新增保存')
            DeliAdd({
                des: this.ruleForm.des,
                imgId: this.ruleForm.imgId,
                imgUrl: this.ruleForm.imgUrl,
                link: this.ruleForm.link,
                pic: this.ruleForm.pic,
                prodName: this.texts,
                relation: this.idd,
                seq: this.ruleForm.seq,
                shopId: this.ruleForm.shopId,
                status: this.ruleForm.status,
                t: this.ruleForm.t,
                title: this.ruleForm.title,
                type: this.ruleForm.type,
                uploadTime: this.ruleForm.uploadTime
            }).then(response => {
                if (response.code == "00000") {
                    this.dialogVisible = false;
                    this.getList();
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });
                } else {
                    this.dialogVisible = false
                    this.$message({
                        type: 'error',
                        message: response.msg
                    });
                }

            })
        },
        // 选中
        handleRadioChange(res) {
            this.imgtt = res.imgs
            this.textt = res.prodName
            this.prodIds = res.prodId
            console.log(res)
        },
        // 搜索
        handleSearch() {
            this.loading = true;
            getList({
                t: this.timestamp,
                current: this.current,
                size: this.size,
                status: this.form.region
            }).then(response => {
                // console.log(response)
                this.tableData = response.data.records
                this.size = response.data.size
                this.total = response.data.total
                this.current = response.data.current
                this.loading = false;
            })
        },
        // 赋值商品卡片数据
        handleSureOne() {
            // this.handleRadioChange()
            this.imgs = this.imgtt
            this.texts = this.textt
            this.idd = this.prodIds
            this.product = true
            this.dialogVisibles = false
        },
        // 确定
        handleSure() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    DelindexImg({
                        des: this.ruleForm.des,
                        imgId: this.ruleForm.imgId,
                        imgUrl: this.ruleForm.imgUrl,
                        link: this.ruleForm.link,
                        pic: this.ruleForm.pic,
                        prodName: this.texts,
                        relation: this.idd,
                        seq: this.ruleForm.seq,
                        shopId: this.ruleForm.shopId,
                        status: this.ruleForm.status,
                        t: this.ruleForm.t,
                        title: this.ruleForm.title,
                        type: this.ruleForm.type,
                        uploadTime: this.ruleForm.uploadTime
                    }).then(res => {
                        if (res.code == "00000") {
                            this.getList();
                            this.dialogVisible = false
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        } else {
                            this.dialogVisible = false
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        // 多选
        handleSelectionChange(res) {
            this.multipleSelection = res.map(row => row.imgId);
            this.lengths = this.multipleSelection.length
            if (this.multipleSelection.length > 0) {
                this.prohibit = false;
            } else {
                this.prohibit = true;
            }
        },
        // 卡片删除
        delProduct() {
            this.Selects = true
            this.product = false
        },
        // 批量删除
        deleteAll() {
            this.$confirm('确定进行[批量删除]操作?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteder(
                    this.multipleSelection
                ).then(res => {
                    this.getList();
                });
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
        },
        // 选择商品
        SelectProduct() {
            this.dialogVisibles = true;
        },
        // 分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.size = val;
            this.getList();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.current = val;
            this.getList();
        },
        // 分页
        handleSizeChanges(val) {
            // console.log(`每页 ${val} 条`);
            this.sizes = val;
            this.handleprodPage();
        },
        handleCurrentChanges(val) {
            // console.log(`当前页: ${val}`);
            this.currents = val;
            this.handleprodPage();
        },
        // 修改
        handleEdit(row) {
            // console.log(row, 'row');
            this.handleAdds = false;
            this.title = '修改'
            getInfo({
                id: row.imgId,
                t: this.timestamp
            }).then((res) => {
                // console.log('res', res.data);
                this.imageUrl = res.data.imgUrl
                this.ruleForm = res.data
                if (res.data.type == 0) {
                    this.product = true
                    this.imgs = res.data.imgUrl
                    this.texts = res.data.prodName
                } else if (res.data.type == -1) {
                    this.product = false
                }
            })
            this.dialogVisible = true
            // console.log(row);
        },
        // 删除
        handleDelete(row) {
            this.$confirm('确定进行[删除]操作?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteder(
                    [row.imgId]
                ).then(res => {
                    this.getList();
                });
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
        },
        // 图片上传
        handleAvatarSuccess(res, file) {
            this.imageUrl = res.data;
            this.ruleForm.imgUrl = res.data;
            // console.log(res.data, "res")
            // this.UploadImage = res.data;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
    // 监听
    watch: {
        'ruleForm.type': function (newVal) {
            if (newVal === -1) {
                this.Selects = false;
                this.product = false;
            } else if (newVal === 0) {
                this.Selects = true;
            }
        },
        product(newVal) {
            if (newVal) {
                this.Selects = false;
            }
        }
    },
    mounted() {
        setTimeout(() => {
            this.timestamp = dayjs().valueOf();
        }, 1000);
        this.getList();
        this.handleprodPage();
    }
}
</script>

<style scoped>
.page {
    margin-top: 30px;
    text-align: right;
    margin-right: 20px;
}

::v-deep.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

::v-deep.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.el-card {
    border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    transition: .3s;
}

.card-prod-bottom .card-prod-name {
    height: 40px;
    margin: auto;
    padding: 0px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 118px;
    display: inline-block;
    margin-top: -12px;
}

.sahnchu {
    margin-top: -28px;
    text-align: right;
    color: #02a1e9;
    margin-right: 4px;
    cursor: pointer;
}
</style>